<template>
  <div class="date-time"><span class="clock-item">{{ date }}</span><span class="clock-item">{{docum}}</span><span class="clock-item">{{ time }}</span> </div>
</template>
<script>
  const clock = {
    name: 'clock',
    data() {
      return {
        time: '',
        date: '',
        week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        timerID: setInterval(this.updateTime, 1000),
        docum: ''
      }
    },
    methods: {
      updateTime() {
        const cd = new Date();
        this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
        this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
        var hour = cd.getHours();
        if (hour < 12){this.docum="上午"}
        else if (hour < 14){this.docum="中午"}
        else if (hour < 17){this.docum="下午"}
        else if (hour < 19){this.docum="晚上"}
      },
      zeroPadding(num, digit) {
        let zero = '';
        for (let i = 0; i < digit; i++) {
          zero += '0';
        }
        return (zero + num).slice(-digit);
      }
    },
    created() {
      this.updateTime();
    }
  }
  export default clock;
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .data-time{
      display: inline-block;
    }
  .clock-item{
    padding:0px 3px 0px 3px;
    font-weight:bold;
  }
</style>
